<template>
  <div class="container pb-20 pt44">
      <h3 class="cont-title tc mt-10">个人服务合同</h3>
      <!-- <div class="content-info content">
        <div class="ui-flexbox ui-jstart mt-5 ">
          <p class="item-title tr">合同编号：</p>
          <p class="b-bottom dark" id="orderId">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
        <div class="ui-flexbox ui-jstart mt-5">
          <p class="item-title tr">甲方：</p>
          <p class="b-bottom dark">&nbsp;&nbsp;恒丰银行股份有限公司&nbsp;&nbsp;</p>
        </div>
        <div class="ui-flexbox ui-jstart mt-5">
          <p class="item-title tr"></p>
          <p class="">(以下简称"甲方"或"恒丰银行")&nbsp;&nbsp;</p>
        </div>
        <p class="txt-space-70">(以下简称"甲方"或"恒丰银行")&nbsp;</p>
        <div class="ui-flexbox ui-jstart">
          <p class="item-title tr">乙方：</p>
          <p class="b-bottom dark">&nbsp;&nbsp;<span id="custName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

        </div>
        <div class="ui-flexbox ui-jstart mt-5">
          <p class="item-title tr"></p>
          <p class="">(以下简称"乙方"或"客户")&nbsp;&nbsp;</p>
        </div>
        <div class="ui-flexbox ui-jstart ">
          <p class="item-title tr">丙方：</p>
          <span class="b-bottom dark">&nbsp;&nbsp;上海通亟汇信息技术有限公司&nbsp;&nbsp;</span>
        </div>
        <div class="ui-flexbox ui-jstart mt-5">
          <p class="item-title tr"></p>
          <p class="">(以下简称"丙方"或"通亟汇")</p>
        </div>
      </div> -->
      <div class="content part-cont mt-15">
        特别提醒：上海银骏科技有限公司（以下简称甲方）和通联商务服务有限公司（以下简称乙方）将联合为您（以下简称丙方）提供“{{cpName}}”服务（以下简称本服务）。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、争议解决和法律适用条款。<span class="bold txt-underline dark">免除或者限制责任的条款可能以加粗字体显示，您应重点阅读。&nbsp;</span>除非您已阅读并接受本合同的所有条款，否则无权申请使用本服务。您使用本服务即视为您已阅读并同意本合同的约束。
      </div>
      <div class="content mt-15">
        <p class="part-cont dark">丙方自愿申请使用甲乙双方联合提供的本服务，用于在商家处进行消费，三方本着平等、自愿的原则，经协商一致，达成如下条款：</p>
      </div>
      <div class="content mt-15">
        <p class="bold dark">第一条   购买商品：</p>
        <!-- <p class="part-cont">除另有约定外，本协议下列用语具有如下含义：</p> -->
        <p class="part-cont">1、  甲方与乙方联合提供本服务，丙方在商家处购买商品选择使用本服务支付货款。</p>
        <p class="part-cont">2、  消费时，丙方阅读并同意本服务合同后，提交支付货款申请；申请审核成功后甲方发送“取货凭证码”至丙方；丙方提货时向商家出示“取货凭证码”，由商家在验证“取货凭证码”后给付商品。</p>
        <p class="part-cont">3、  甲方可以授权第三方以包括但不限于串号、条码、二维码等方式生成“取货凭证码”，并推送给丙方。</p>
        <!-- <p class="part-cont">(四)&nbsp;贷款逾期罚息：指客户未按照本借款协议约定履行义务所应承担的违约责任形式，贷款逾期罚息按照逾期金额的万分之五按日收取。</p>
        <p class="part-cont">(五)&nbsp;到期还款日：指客户每一期款项应还款的最晚日期，遇节假日不顺延。</p>
        <p class="part-cont">(六)&nbsp;到期应付款：指客户在到期还款日前应支付的全部金额，包括但不限于借款本金、利息、贷款逾期罚息等。</p>
        <p class="part-cont">(七)&nbsp;单位，金额以人民币“元”为计算单位，四舍五入，精确到小数点后两位；期限以“自然日”、“天”为计算单位。</p> -->
      </div>
      <div class="content mt-15">
        <p class="bold dark"> 第二条   资金支付：</p>
        <p class="part-cont bold dark">丙方委托乙方指定的代扣机构将应支付的款项从指定用于本服务支付的信用卡账户划至甲方指定的账户。</p>
          <p class="part-cont dark">1、 本金：合同的本金和丙方在公众号服务界面输入的金额应一致。如金额不一致，则以公众号服务届面上输入的金额（后台数据）为准。</p>
          <p class="part-cont dark">2、 通道服务费：当丙方选择被动还款方式进行还款时，甲方向丙方收取的通道服务费用，计算方式为：本金×1%。</p>
          <p class="part-cont dark">3、 预授权冻结金额：甲方将于丙方成功申请本服务之日将丙方指定信用卡的相应款项额度进行冻结，冻结金额计算方式为：本金+本金×天数×日利息+通道服务费（具体冻结金额以公众号服务界面显示为准）。</p>
          <p class="part-cont dark">4、 账期：0-25个自然日，最后还款日到期之前可以随时进行主动还款，最后还款日则以公众号服务界面（后台数据）显示为准。</p>
          <p class="part-cont dark">5、 资金支付用途：仅限丙方用于在商家处消费。</p>
          <p class="part-cont dark">6、 款项收取方式：</p>
          <p class="indent4">1）丙方同意本服务合同条款后，自愿选择使用“{{cpName}}”服务购买选定商品，<span class="bold dark">并授权甲方使用其指定用于款项支付的信用卡账户的授信额度作为还款担保。乙方将委托代扣方于丙方成功申请本服务的当日从丙方指定信用卡中直接扣除账户验证费人民币1元用于对丙方提供的账户信息进行验证。</span></p>
          <p class="indent4">2）信用卡账户授信额度担保审核通过后，丙方同意，在最后还款日到期后丙方仍未主动还款的，由甲方将应付款项计入丙方当期信用卡账单。</p>
          <p class="indent4">3）若通过上述方式无法偿还，则甲方有权通过其他方式要求丙方偿还应付款项。</p>
        <p class="part-cont dark">7、<span class="bold dark">甲方有权自行转让其在本合同下（也仅限于本合同项下）的全部或部分债权给相关第三方而无需征得丙方的同意。</span></p>
        <p class="part-cont dark">8、<span class="bold dark">甲方有权根据支付安全的需要，采取不同的授信额度转消费和冻结方式。</span></p>
      </div>
      <div class="content mt-15">
        <p class="bold dark">第三条 　还款方式</p>
        <p class="part-cont dark"  v-if="isShow">1、主动还款：丙方在最后还款日到期之前，选择一张借记卡主动进行还款，甲方按资金借用天数向丙方收取利息及本金（具体冻结金额以公众号服务界面显示为准）。</p>
        <p class="part-cont">{{Num.first}}、被动还款：丙方在最后还款日到期之前未选择主动还款，甲方将在最后还款日将信用卡预授权冻结金额全额转消费计入丙方信用卡账单。</p>
        <p class="part-cont dark">{{Num.second}}、<span class='bold dark'>丙方保证所提供的信用卡还款账户真实有效，并承担因账户错误、虚假、过期、被冻结、被挂失、被降额、被限额或可用授信额不足以划扣应付款项等原因所引起的一切责任和后果。如还款账户发生包括但不限于资料变更、被冻结、被挂失、被降额、被限额或可用授信额不足等情况，丙方应及时在公众号（微信号：小通金服）完成还款账户变更申请或致电服务热线协商缴足相关款项。</span></p>
      </div>
      <div class="content mt-15">
        <p class="bold dark">第四条   售后保障：</p>
        <p class="part-cont dark">1、所有商品信息均来自于与甲方合作的商家，其真实性、准确性和合法性由商家负责。</p>
        <p class="part-cont dark">2、甲方和乙方联合向丙方提供本服务，使丙方可以使用本服务购买商品，商品的售后保修服务由商家提供，与甲乙方无关。</p>
        <p class="part-cont dark">3、丙方同意根据乙方与商家签订的《供应链消费金融服务协议》，商品的售后、退换货服务由特约商家提供。如丙方未能与商家就商品服务纠纷达成共识（包括但不限于商品质量的问题），<span class="bold dark">丙方不得以与商家之间的商品服务纠纷为由拒绝向甲方履行分期付款责任。</span></p>
        <!-- <ul class="border ui-flexbox" style="flex-wrap: wrap;">
          <li class="b-right t-left b-bottom ui-flexbox ui-acenter ui-jcenter">借款本金</li>
          <li class="t-right pl-10 b-bottom">¥<span class="txt-underline dark" id="principal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
          <li class="b-right t-left b-bottom ui-flexbox ui-acenter ui-jcenter">借款利息</li>
          <li class="t-right pl-10 b-bottom"><span class="txt-underline  dark" id="interest">&nbsp;&nbsp;9&nbsp;&nbsp;</span>%/年，其中乙方承担借款利息的 <span class="txt-underline  dark" id="custInt">&nbsp;&nbsp;&nbsp;&nbsp;</span>%，丙方承担借款利息的<span class="txt-underline dark" id="midInt">&nbsp;&nbsp;&nbsp;&nbsp;</span> % </li>
            <li class="b-right t-left b-bottom ui-flexbox ui-acenter ui-jcenter">分期还款期数</li>
          <li class="t-right pl-10 b-bottom ui-flexbox ui-acenter ui-jstart"><span class="check border" id="3-stage"></span>3期&nbsp;<span class="check border" id="6-stage"></span>6期&nbsp;  <span class="check border" id="9-stage"></span>9期  &nbsp;<span class="check border" id="12-stage"></span>12期&nbsp;</li>
            <li class="b-right t-left b-bottom ui-flexbox ui-acenter ui-jcenter">借款期限</li>
          <li class="t-right pl-10 b-bottom"><span class="txt-underline dark start-year">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>年<span class="txt-underline dark start-month">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>月<span class="txt-underline dark start-day">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>日 起至<span class="txt-underline dark end-year">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>年<span class="txt-underline dark end-month">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>月 <span class="txt-underline dark end-day">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>日 止</li>
          <li class="b-right t-left ui-flexbox ui-acenter ui-jcenter ">每期还款金额</li>
          <li class="t-right pl-10 ">¥<span class="txt-underline dark" id="eachAmt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>（其中乙方每期还款¥<span class="txt-underline dark" id="eachCustAmt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>，丙方每期还款¥<span class="txt-underline dark" id="eachMerAmt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>）</li>
        </ul> -->
      </div>
      <div class="content mt-15">
        <p class="bold dark">第五条   丙方的声明、保证、承诺和相关义务：</p>
          <p class="part-cont">1、丙方在履行合同期间无条件地配合甲方和乙方对其资信状况、分期支付使用情况以及偿还分期支付情况进行监督检查。</p>
          <p class="part-cont">2、丙方个人资产、经济状况等发生实质性变化或发生任何影响本合同义务履行的事项，应立即书面通知甲方。丙方参与可能影响其履行本合同项下义务的活动之前应经甲方的书面同意。</p>
          <p class="part-cont"><span class="bold dark">3、丙方同意并授权甲方及乙方在履行本合同过程中，为本合同之目的查询和使用任何合法设立的信息库有关丙方的全部信息，并授权指定甲方及乙方不定时地向中国人民银行个人信用信息基础数据库等有关征信机构及其他任何第三方查询、获取、保留、提供其个人信息和信用信息。</span></p>
          <p class="part-cont">4、若丙方发生违约，丙方同意甲方及甲方聘请的任何第三方有权以合法的方式向丙方发出提示及追索，丙方不得提出任何异议或提出任何诉讼。</p>
          <p class="part-cont bold dark">5、丙方承诺按本合同约定的用途使用甲乙双方联合提供的本服务进行支付购买商品或服务，与丙方享有的商品或服务质量和售后权益属于完全不同的法律关系，因此不能以在使用过程中产生的质量和售后权益纠纷（包括但不限于质量及售后服务纠纷）为由拒绝履行本合同。丙方购买的商品或服务质量及售后服务由商家提供。</p>
          <p class="part-cont">6、丙方同意：如甲方转让本合同下的债权，丙方将继续按照约定的支付方式，向新的债权受让方履行本合同下的所有义务。丙方承诺不因该债权转让提出任何异议，同时放弃以与商家之间的买卖或服务纠纷拒绝向债权受让方履行付款责任。</p>
          <p class="part-cont">7、丙方向甲方及乙方声明并保证如下：1）丙方提供的所有信息完整、准确、真实并无误导性；2）本合同的签订和履行未构成丙方作为协议一方的或受约束的任何合同、协议、保证或承诺下的违约行为；3）丙方签订和履行本合同不违反任何法律、法规、条例或任何法庭、仲裁机关或行政机关的命令、判决或决议；4）丙方未以任何形式涉及任何未决的、进行中的或有危险发生的法律行动、索赔、起诉、仲裁或行政程序等可能影响本合同履行的事件。</p>
          <p class="part-cont dark">8、<span class="bold dark">丙方保证按指定用于支付的信用卡开户行的指定期限和标准，偿还应支付款项，保证信用卡在账期内为正常使用状态，有足够可用授信额度供甲方划扣应付款项，否则甲方有权更换丙方名下其他信用卡划扣应支付款项。</span></p>
          <p class="part-cont dark">9、<span class="bold dark">丙方同意：丙方通过在银行办理信用卡时预留的手机号码获取支付短信验证码，在公众号服务界面输入并通过短信验证步骤，则视为丙方本人操作。因丙方的过错导致的任何损失由丙方自行承担，该过错包括但不限于：不按照交易提示操作，未能及时进行交易操作，遗忘或泄露“取货凭证码”或支付短信验证码，手机被盗、账号被盗等。</span></p>
      </div>
      <div class="content mt-15">
        <p class="bold dark">第六条   违约责任：</p>
          <p class="part-cont">1、 丙方未能在最后还款日前全额支付应付款项将构成丙方在本合同下的违约。甲方有权执行本合同第五条第4款。</p>
          <p class="part-cont">2、 <span class="bold dark">丙方发生以下情况，属于严重违约：</span>①丙方使用虚假身份证明文件；②、丙方提供的信用卡账户，经查核已被银行信用系统列入黑名单或被依法冻结；③丙方在与甲方或乙方签订的任何其他合同中有严重违约行为；④丙方作出的与本服务有关的任何陈述或保证虚假、不完整、不准确或有歧义，或丙方违背第五条所作出的任何保证、承诺或同意；⑤甲方或乙方有证据证明丙方自本服务申请之日起就本服务从事过任何欺诈行为或丙方可能无能力履行本合同项下的支付义务；⑥丙方发生或可能发生影响甲方或乙方在本合同项下权益的任何其他情形。<br><span class="bold dark">丙方发生以上第①项、第②项违约情形，将直接导致本合同提前终止，甲方及乙方有权要求丙方立即偿还本合同下全部剩余款项。丙方发生以上违约情形之一，则：（1）在本金发放之前，甲方或乙方有权单方解除本合同而无需承担任何违约责任；或（2）在本金发放之后，甲方或乙方有权宣布本合同提前到期，要求丙方立即一次性履行本合同项下全部义务。</span></p>
          <p class="part-cont dark">3、因丙方违约，甲方及乙方为执行本合同、实现合同权益所支付的所有费用（包括但不限于律师费，和交通、食宿、诉讼费、评估、鉴定、登记、公证、公告、保险、保管、运输等费用） 均由丙方承担。</p>
      </div>
      <div class="content mt-15">
        <p class="bold dark"> 第七条   还款顺序：</p>
          <p class="part-cont">丙方在不同时期与甲方或乙方签订多份合同，清偿顺序按签订时间确定。</p>
      </div>
      <div class="content mt-15">
        <p class="bold dark"> 第八条   争议解决方式：</p>
          <p class="part-cont">1、本合同的订立、解释及争议的解决均适用中华人民共和国的法律、法规。本合同履行所发生的纠纷，双方应协商解决，协商不成的任何一方均可向本合同签订地广州市天河区人民法院提请诉讼。</p>
          <p class="part-cont">2、各方在协商、诉讼期间，对本合同项下不涉及争议的条款，仍须执行。</p>
      </div>
      <div class="content mt-15">
        <p class="bold dark"> 第九条   其他约定：</p>
          <p class="part-cont">1、本合同下丙方任何付款行为应被认定在支付账户贷记入相应款项时发生。该时间根据相关银行向甲方提供的交易记录确定。</p>
          <p class="part-cont">2、丙方同意，当还款通道变更或丙方信用卡状态异常时，甲方及乙方有权要求丙方立即偿还本合同下全部款项。</p>
          <p class="part-cont">3、在商家处消费时，“取货凭证码”和丙方本人的真实身份证为本合同不可分割的有效组成部分，均需妥善保管。<span class="dark bold">商家验证丙方“取货凭证码”成功，则视为丙方本人确认已收取商品。</span></p>
          <p class="part-cont">4、为保障丙方权益，丙方联系电话号码等个人信息发生变动后应于5个自然日内在公众号服务界面修改资料并提交给甲方。若丙方未及时通知，甲方仍按乙方所留电话或地址寄发相关信息或信件的，均视为有效送达，由此产生的一切后果由丙方承担。</p>
          <p class="part-cont">5、若本合同的任何条款被任何司法或有权机关认定为无效或不可强制执行，该条款将被从本合同中分离出来，其余条款仍应有效。</p>
          <p class="part-cont">6、丙方同意，若相关法律法规和信用政策发生变化，则甲方无需提前发出书面通知，也无需得到丙方的许可，甲方即有权按新的法律法规和信用政策规定处理本合同的相关事务。</p>
          <p class="part-cont">7、丙方同意，本合同所涉及的丙方个人资料公开给甲方、乙方和商家，以用于管理本服务会员信息库等方面的用途。</p>
          <p class="part-cont">8、本合同采用电子文本形式制成，各方均认可该形式合同的法律效力。自丙方成功办理本服务之日起生效。</p>
      </div>

      <div class="content mt-15">
        <p class="ui-flexbox ui-acenter ui-jstart"><span class="check border" id="agreeBox"></span>&nbsp;本人阅读并同意以上条款</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;本合同于<span class="txt-underline start-year">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>年<span class="txt-underline start-month">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>月 <span class="txt-underline start-day">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>日签订 </p>

      </div>
      <div class="go-top" @click="goTop" v-show="isToTop">
        <img v-bind:src="this.$store.state.imagesUrl + '/tmup.png'">
      </div>
  </div>
</template>

<script>
export default  {
    name: 'Agreement',  // 组件名称
    data () {  // 数据
        return {
            msg: 'Agreement',
            cpName:'小通帮你延',
            isShow:true,
            Num:{
              first:2,
              second:3
            },
            isToTop:false
        }
    },
    methods:{ // 自定义方法，可对data进行处理
      goTop:function(){
        document.body.scrollTop=0;
        document.documentElement.scrollTop=0;
      },
      handleScroll:function(){
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop>=600){
            this.isToTop=true;
        }else{
          this.isToTop=false;
        }
      }
    },
    created:function(){
      if(this.$route.params.id==='2'){
        this.isShow=false;
        this.Num.first=1;
        this.Num.second=2;
        this.cpName='小通帮你延';
      }else{
        this.cpName='小通帮你借';
      }
    },
    mounted:function(){
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed:function(){
      window.removeEventListener('scroll', this.handleScroll);
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/_flex";
html,body,#app{
  height: 100%;
  overflow: hidden;
}
.content {
  padding: 0 15px;
  font-size: 14px;
}
.content .item-info {
  width: 50%;
}
.content .item-title {
  width: 70px;
}

.font-16 {
  font-size: 16px;
}

.cont-title {
  color: #222;
}

.txt-space-40 {
  text-indent: 40px;
}

.txt-space-70 {
  text-indent: 70px;
}

.b-bottom {
  border-bottom: 1px solid #222;
}

.b-left {
  border-left: 1px solid #222;
}

.b-right {
  border-right: 1px solid #222;
}

.b-top {
  border-top: 1px solid #222;
}

.border {
  border: 1px solid #222;
}

.txt-underline {
  text-decoration: underline;
}

.part-cont {
  text-indent: 2em;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.dark {
  color: #222;
}


.mt-15 {
  margin-top: 15px;
}

.bold {
  font-weight: bold;
}
.indent4{
  text-indent: 3.5em;
}
.pl-10 {
  padding-left: 10px;
}

.pr-25 {
  padding-right: 25px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-5 {
  margin-top: 5px;
}

.pl-70 {
  padding-left: 70px;
}

.t-left {
  width: 30%;
}

.t-right {
  width: 70%;
}

.pb-20 {
  padding-bottom: 20px;
}

.check {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #666;
}

.go-top {
  position: fixed;
  bottom: 20px;
  right: 10px;
  display: block;
  width: 32px;
  height: 32px;
  z-index: 100;
  cursor: pointer;
}
.go-top img{
  width: 32px;
  height: 32px;
}

</style>
